<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        username &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;&nbsp;
        password &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;&nbsp;
        nickname 
    </div>

    <input type="text" class="textUsername">
    <input type="text" class="textPassword">
    <input type="text" class="textNickname">
    <button class="add">添加</button>
    <br> 
    <br> 
    <hr>
    <br>
    <span>query:</span>
    <input type="text" placeholder="请输入username" class="textQuery">
    <button class="query">查询</button> 

    <br>
    <br>

    <table border="1px" width="670px" height="10px" cellspacing="0" style="text-align: center;">      
            <thead>
                <tr>
                    <th>username</th>
                    <th>password</th>
                    <th>nickname</th>
                    <th>operation</th>
                </tr>
            </thead> 
    </table>
</body>
<script src="jquery.js"></script>
<script>
// dataArr 数据容器
let dataArr=[

]


//获取表格
const table = document.querySelector('table')
// 创建节点
const mytbody = document.createElement('tbody')


// 数据初始化渲染
function rendering( a = dataArr ) {
    if(a.length && a){
        mytbody.innerHTML = a.map((item,index)=>{
            return`<tr>
                        <td>${item.username}</td>
                        <td>${item.password}</td>
                        <td>${item.nickname}</td>
                        <td><button data-id=${index} class='mydel'>删除</button><button data-id=${index} class='myrevise'>修改</button></td>
                    </tr>`
        }).join('')
        table.appendChild(mytbody)
    }else{
        alert('没有获得到数据哦！')
        mytbody.innerHTML=`<td colspan="4">没有获得到数据哦 .....</td>`
        table.appendChild(mytbody)
    }
}





// 页面加载的时候，获取数据
function getData(){
    $.ajax({
        type:'get',
        url:'hello',
        success:function(body){
            dataArr=body;
            body ? rendering(body) : rendering();
        }
    })
}

getData();


//----------------------------------- 操作功能

// 添加功能的状态标识
let i = 1
let myindex

const textUsername = document.querySelector('.textUsername')
const textPassword = document.querySelector('.textPassword')
const textNickname = document.querySelector('.textNickname')
const textQuery = document.querySelector('.textQuery')

const add = document.querySelector('.add')

add.addEventListener("click",function () {
    if(i){
        // 添加操作
        let body= {}
        body.username=textUsername.value
        body.password=textPassword.value
        body.nickname=textNickname.value
        body.operation="添加"

        //当前输入框里的内容 通过 Ajax 发送给服务器
        $.ajax({
            type:'post',
            url:'hello',
            contentType:'application/json,charset=utf8',
            data: JSON.stringify(body),
            success:function(body){
                getData();
                alert("添加成功");
            },
            error:function(){
                alert("添加失败");
            }
        })

    }else{
        // 修改操作
        add.innerText='添加'
        i=1 

        //最下面拿到obj发请求这里发ajax 修改请求 obj
        let body = {}
        body.username = textUsername.value
        body.password = textPassword.value
        body.nickname = textNickname.value
        body.operation = "修改"

        $.ajax({
            type:'post',
            url:'hello',
            contentType:'application/json,charset=utf8',
            data: JSON.stringify(body),
            success:function(body){
                console.log(body)
                getData();
                alert("修改成功");
            },
            error:function(){
                alert("修改失败");
            }
        })

        // 渲染
        getData();

    }
    // 清空数据
    textUsername.value=''
    textPassword.value=''
    textNickname.value=''
})

// 删除
table.addEventListener('click',function (e) {

    if(e.target.className==='mydel'){
        const index = dataArr.findIndex((item,index)=>{
            return index === +e.target.dataset.id
        })

        let body = {}
        body.username =  dataArr[index].username
        body.operation = "删除"

        $.ajax({
            type:'post',
            url:'hello',
            contentType:'application/json,charset=utf8',
            data: JSON.stringify(body),
            success:function(body){
                console.log(body);
                getData();
                alert("删除成功");
            },
            error:function(){
                console.log(body);
                alert(body.operation);
                alert("删除失败");
            }
        })

        // 渲染
        getData();

    }else if(e.target.className==='myrevise'){
        // 修改
        const index = dataArr.findIndex((item,index)=>{
        return index === +e.target.dataset.id
        })
        textUsername.value=dataArr[index].username
        textPassword.value=dataArr[index].password
        textNickname.value=dataArr[index].nickname
        add.innerText='点我修改'
        i=0 
        myindex = index
    }
})

// 查询
document.querySelector('.query').addEventListener('click', function(){
    if(textQuery.value){

        let body = {}

        body.username =  textQuery.value
        body.operation = "查询"

        $.ajax({
            type:'post',
            url:'hello',
            contentType:'application/json,charset=utf8',
            data: JSON.stringify(body),
            success:function(body){
                console.log(body);
                //getData();
                getData();
                alert("提交成功");
            },
            error:function(){
                console.log(body);
                alert(body.operation);
                alert(body.username);
                alert("提交失败");
            }
        })

    }else{

        // 渲染
        getData();
    }
})
</script>

</html>